<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="4">
          <el-select
            v-model="queryInfo.department_id"
            clearable
            placeholder="请选择学院"
            @clear="getRollSheetList()"
          >
            <el-option
              v-for="item in DepartmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getRollSheetList()"
            >搜索</el-button
          >
        </el-col>
      </el-row>

      <el-table
        :data="rollSheetTable"
        border
        stripe
        @expand-change="handleExpand"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <!-- <el-form-item label="实出勤">
                <span>{{ props.row.attendance_num }}</span>
              </el-form-item>
              <el-form-item label="应出勤">
                <span>{{ props.row.students_num }}</span>
              </el-form-item> -->
              <el-form-item label="请假学生">
                <span>{{ props.row.leave_name }}</span>
              </el-form-item>
              <el-form-item label="旷课学生">
                <span>{{ props.row.truant_name }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="班级" prop="class_name"></el-table-column>
        <el-table-column
          label="阶段"
          prop="course"
          width="200px"
        ></el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{ getType(scope.row.act) }}
          </template>
        </el-table-column>
        <el-table-column
          label="课节日期"
          prop="class_date"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="原课节"
          prop="class_section"
          width="70px"
        ></el-table-column>
        <el-table-column
          label="实际课节日期"
          prop="actual_date"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="课节"
          prop="actual_section"
          width="50px"
        ></el-table-column>
        <el-table-column label="讲师" prop="lecturer"> </el-table-column>
        <el-table-column label="导员" prop="counsellor"> </el-table-column>
        <el-table-column label="点名状态" prop="state">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state == 0">未点名</el-tag>
            <el-tag v-else type="success">已点</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="点名时间" width="200px">
          <template slot-scope="scope">
            {{ scope.row.update_time | datetime }}
          </template>
        </el-table-column>
        <el-table-column label="应出勤" prop="attendance_num">
        </el-table-column>
        <el-table-column label="实出勤" prop="students_num"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-link
              @click="handleClickLink(scope.row.id)"
              type="primary"
              icon="el-icon-user"
              v-if="scope.row.state == 0"
              >点名</el-link
            >
            <el-link
              v-else
              @click="handleClickLink(scope.row.id)"
              type="warning"
              icon="el-icon-edit"
            >
              修改
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getAllDepartment } from '../../api/department'
import { getRollSheetLists, getStudentName } from '../../api/rollsheet'
export default {
  data() {
    return {
      DepartmentOptions: [],
      queryInfo: {
        department_id: '',
        pagenum: 1,
        pagesize: 5,
      },
      rollSheetTable: [],
      total: 0,
      getname: {
        kangkename: '',
        qingjianame: '',
      },
     
    }
  },

  mounted() {},
  created() {
    this.getDepartmentLists()
    this.getRollSheetList()
  },
  methods: {
    async handleExpand(row) {
      this.getname.kangkename = row.cut_classes
      this.getname.qingjianame = row.leave
      console.log(this.getname)
      const res = await getStudentName(this.getname)
      console.log(res)
      row.truant_name = res.truant_name.join(',')
      row.leave_name = res.leave_name.join(',')
      this.handleExpand()
      console.log(row)
    },
    async getDepartmentLists() {
      const departments = await getAllDepartment()
      if (departments) {
        departments.forEach((item) => {
          this.DepartmentOptions.push({
            value: item.id,
            label: item.name,
            is_school: item.is_school,
          })
        })
      }
    },
    async getRollSheetList() {
      console.log(this.queryInfo.pagenum)
      const res = await getRollSheetLists(this.queryInfo)
      console.log(res)
      this.rollSheetTable = res.data
      this.total = res.count
    },
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.queryInfo.pagenum = 1
      this.getRollSheetList()
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getRollSheetList()
    },
    getType(act) {
      if (!act) return ''
      return act.change_type ? '代课' : '调课'
    },
    handleClickLink(id) {
      this.$router.push({
        name: 'roll-sheet_call',
        params: { id },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.demo-table-expand {
  margin-left: 20px;
  font-size: 0;
}
/deep/.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
/deep/.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>